<!-- home -->
<template>

  <div>

    <el-button @click="showMap">点击显示地图</el-button>
    <label>关键词：<input v-model="keyword"></label>
    <label>地区：<input v-model="location"></label>
    <!--    lng: <input v-model.number="marker.lng">-->
    <!--    lat: <input v-model.number="marker.lat">-->
    <!--    zoom：<input v-model.number="zoom">-->

    <!--    :zoom="zoom" ,-->
    <!--   移动展示 标点  @moving="syncCenterAndZoom"-->
    <!--    移动停止 展示标点@moveend="syncCenterAndZoom"-->
    <!--    @zoomend="syncCenterAndZoom"-->
    <!--    v-show="mapshow"-->
    <div style="margin-left: 400px">
      <baidu-map
          class="map"
          v-if="mapshow"
          @ready="handler"
          style="height: 500px;width: 700px;"
          :center="marker"
          @moveend="syncCenterAndZoom">
        <div>
          <!--        查询 城市-->
          <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
          <!--        定位-->
          <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_LEFT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
          <!--地图 缩略图-->
          <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
          <!--缩放 比例-->
          <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
          <!--全景-->
          <bm-panorama></bm-panorama>
          <!--        查询-->
          <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
          <bm-marker
              :dragging="true"
              animation="BMAP_ANIMATION_BOUNCE"
              :position="{lng:marker.lng,lat:marker.lat}"
              @dragend="dragend"
              @dblclick="showposition">
            <bm-info-window
                title="弹窗信息"
                :position="{lng: marker.lng, lat: marker.lat}"
                :show="false">
              <!--            <p>名称:西北大院</p>-->
              <!--            <p>地址:北京市</p>-->
              <!--            <p>价格:195.00</p>-->

            </bm-info-window>
          </bm-marker>
        </div>
      </baidu-map>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      marker: {
        // lng: 116.404,
        // lat: 39.915,

        lng: 106.349046,
        lat: 29.642342
      },
      zoom: 15,
      location: null,
      keyword: null,
      mapshow: false,
    };
  },
  methods: {
    handler: function ({BMap, map}) {
      map.enableScrollWheelZoom(true)
      map.centerAndZoom("北京", 14)

      console.info("lat", map.re.lat)
      console.info("lng", map.re.lng)

      this.marker.lat = map.re.lat
      this.marker.lng = map.re.lng

      console.info("输出跳转地点=>", map)
      const _this = this
      const geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(function (r) {
        // setTimeout(hide, 10000)
        console.log(r)
        _this.center = {lng: r.longitude, lat: r.latitude}        // 设置center属性值
        // _this.autoLocationPoint = { lng: r.longitude, lat: r.latitude }        // 自定义覆盖物
        _this.initLocation = true
      }, {enableHighAccuracy: true})
    },
    // 拖动结束后
    dragend(e) {

      this.position = e.point
      console.log(this.position)

      const gc = new BMap.Geocoder()
      gc.getLocation(e.point, function (rs) {
        console.log("打印信息", rs)
        // var addComp = rs.addressComponents
        // this.addr = addComp.province + ', ' + addComp.city + ', ' + addComp.district + ', ' + addComp.street + ', ' + addComp.streetNumber

        console.info("address商家信息=>", rs.address)
      })
    },
    showposition(e) {
      this.mapshow = false
      console.info("输出 内容=>", e)
    },
    syncCenterAndZoom(e) {
      //移动 触发
      const {lng, lat} = e.target.getCenter()
      this.marker.lng = lng
      this.marker.lat = lat
      this.zoom = e.target.getZoom()
      //打印 坐标
      console.info("lng:", lng, "lat:", lat)
    },
    showMap() {
      this.mapshow = true
    }
  },
};
</script>
<style>

/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
  display: none !important;
}

.baidumap > .anchorBL {
  display: none !important;
}
</style>
